<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <style>
        .abc{
            color: red;
            background: pink;
            font-size: 20px;
        }
    </style>
    <script>
        function doQuery() {
            // $('#second').prev().css('color','red')
            // $('#second').next().css('color','red')
            // $('#second').siblings().css('color','red')
            // $('#second').parent().children().css('color','red') // 链式写法
            // console.log($('#second').parent().children().text());

            for(var item of $('#second').parent().children()){
                // console.log(item);  // item是DOM对象
                console.log($(item).text());
            }

            // $('#second').parent().children().each((index,item) => {
            $('#second').parent().children().each(function(index,item){
                // console.log($(item).text());
                // console.log(this); // this表示当前遍历的元素，DOM对象
                console.log($(this).text());
            })

        }

        function doProperty() {
            // console.log($('#hello').attr('title'));
            // console.log($('#hello').attr('id'));
            // $('#hello').attr('title','世界')

            // console.log($('#username').val());
            // $('#username').val('mike')

            // console.log($('#protocol').prop('checked'));

            // $('#protocol').prop('checked',true)
        }

        function doContent() {
            // console.log($('#hello').text());
            // console.log($('#hello').html());

            // $('#hello').html('<h2>aaaa</h2>')
            $('#hello').text('<h2>aaaa</h2>')
        }
        
        function doStyle() {
            // $('#hello').css('color','red')
            $('#hello').addClass('abc')
        }
    </script>
</head>
<body>
    <button onclick="doQuery()">查询操作</button>
    <button onclick="doProperty()">访问属性</button>
    <button onclick="doContent()">访问内容</button>
    <button onclick="doStyle()">访问CSS</button>
    <hr>

    <ul>
        <li>li1</li>
        <li id="second">li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>
    <hr>

    <div id="hello" title="world">
        <h3>哈哈哈哈</h3>
    </div>
    用户名：<input type="text" id="username"> <br>
    许可协议：<input type="checkbox" id="protocol"> <br>



</body>
</html>